snippet b4.fm
	<form>
		<div class="form-group row">
			<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
			<div class="col-sm-10">
			<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
			</div>
		</div>
	</form>
snippet b4.login
	<div class="container">
		<form class="form-signin" method="post">{% csrf_token %}
		<h2 class="form-signin-heading">${1:Please sign in}</h2>
		<label for="$4" class="sr-only">${2:Email address}</label>
		<input type="${3:email}" id="${4:inputEmail}" class="form-control" placeholder="${5:Email address}" required="" autofocus="">
		<label for="inputPassword" class="sr-only">Password</label>
		<input type="password" id="inputPassword" class="form-control" placeholder="${6:Password}" required="">
		<div class="checkbox">
			<label>
			<input type="checkbox" value="remember-me"> ${7:Remember me}
			</label>
		</div>
		<button class="btn btn-lg btn-primary btn-block" type="submit">${8:Sign in}</button>
		</form>
	</div>
#==================================================== label ==========================================================
snippet lab
	<span class="label label-${1:default}">${2:$1}</span>
snippet lab.pill
	<span class="label label-pill label-${1:default"}>${2:Default}</span>
#==================================================== btn ==========================================================
snippet btn
	<button type="button" class="btn btn-${1:primary}">${2:$1}</button>
snippet btn+
	<button type="button" class="btn btn-${1:primary}">${2:$1}</button>
	btn+$0
snippet btn.outline
	<button type="button" class="btn btn-${1:primary}-outline">${2:$1}</button>
snippet btn.outline+
	<button type="button" class="btn btn-${1:primary}-outline">${2:$1}</button>
	btn.outline+$0
snippet btn.a
	<a class="btn btn-${1:primary}" href="${3:#}" role="button">${2:$1}</a>
snippet btn.a+
	<a class="btn btn-${1:primary}" href="${3:#}" role="button">${2:$1}</a>
	btn.a+$0
snippet btn.input
	<input class="btn btn-${1:primary}" type="button" value="${2:$1}">
snippet btn.input+
	<input class="btn btn-${1:primary}" type="button" value="${2:$1}">
	btn.input+$0
snippet btn.grp
	<div class="btn-group" role="group" aria-label="Basic example">
		<button type="button" class="btn btn-${1:secondary}">${2:$1}</button>
		btn+$0
	</div>
#==================================================== bootstrap4 card ==========================================================
snippet b4.card.n
	<div class="card">
		<img class="card-img-top" data-src="${1:#}" alt="Card image cap">
		<div class="card-block">
			<h4 class="card-title">${1:Card title}</h4>
			<p class="card-text">${2:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
			<a href="#" class="btn btn-${3:primary}">${4:Button}</a>
		</div>
	</div>
snippet b4.card:text
	<div class="card card-block">
		<h4 class="card-title">Card title</h4>
		<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		<a href="#" class="card-link">Card link</a>
		<a href="#" class="card-link">Another link</a>
	</div>
snippet b4.card
	<div class="card">
		<div class="card-block">
			$1
		</div>
	</div>
snippet b4.cardblk
	<div class="card-block">
		$1
	</div>
snippet b4.card&blk
	<div class="card card-block">
		$1
	</div>
snippet b4.cardheader
	<div class="card-header">
		${1:Featureda}
	</div>
snippet b4.cardfooter
	<div class="card-footer text-muted">
		${1:footer}
	</div>
snippet b4.cardh4
	<h4 class="card-title">${1:Card title}</h4>
snippet b4.cardh6
	<h6 class="card-subtitle text-muted">Support card subtitle</h6>
snippet b4.cardp
	<p class="card-text">${1:Some quick example text to build on the card title and make up the bulk of the card's content.}</p>
snippet b4.carda
	<a href="${2:#}" class="card-link">${1:Card link}</a>
snippet b4.cardimg
	<img data-src="${1:#}" alt="Card image cap">
snippet b4.cardimg:t
	<img class="card-img-top" data-src="${1:#}" alt="Card image cap">
snippet b4.cardimg:b
	<img class="card-img-bottom" data-src="${1:#}" alt="Card image cap">
snippet b4.cardul
	<ul class="list-group list-group-flush">
		<li class="list-group-item">${1:Cras justo odio}</li>
	</ul>
#==================================================== edition ==========================================================
snippet b4.dl
	<dl class="dl-horizontal">
		<dt class="col-sm-$1">$3</dt>
		<dd class="col-sm-$2">$4</dd>
	</dl>
#==================================================== tab nav ==========================================================
snippet b4.tabs
	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" href="#$3" role="tab" data-toggle="tab">${1:Home}</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#$4" role="tab" data-toggle="tab">${2:Profile}</a>
		</li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="${3:home}">
			$5
		</div>
		<div role="tabpanel" class="tab-pane" id="${4:profile}">
			$6
		</div>
	</div>
